<script setup lang='ts'>
  import { reactive } from 'vue';
  import request from '@/api/index';
  import xmdialog from '@/components/xmdialog.vue';
  import { xmloading, xmtoast, tpreventoftenFun } from '@/utils/public';
  import { userStore } from "@/pinia/modules/user";
  import { debris_balance } from '@/pinia/getter';
  interface goodsInfo {
    good_id:number
    goods_name:string
    small_img:string
    price:number
    goods_type:number
  }
  const action = reactive({
    show:false,
    good_id:0,
    price:0,
    totalValue:0,
    goodsNum:0,
  })
  const specification = [1,5,10,30]
  const handleNum = (day:number = 0)=>{
    if(!day) return
    action.goodsNum = day
    action.totalValue = action.price * day
  }
  const handleExchange = tpreventoftenFun(async()=>{
    if(!action.good_id) return xmtoast('缺少必要参数')
    if(!action.goodsNum) return xmtoast('请选择兑换天数')
    if(debris_balance.value < action.totalValue) return  xmtoast('碎片余额不足')
    const loading = xmloading()
    await request.debrisExchangeGoods({
      good_id:action.good_id,
      num:action.goodsNum
    })
    loading.close()
    xmtoast('兑换成功')
    closeDialog()
    userStore().getWallet()
  }) 
  const openDialog = (query:goodsInfo)=>{
    const { good_id=0, price } = query
    action.good_id = good_id
    action.price = price
    action.show = true
    handleNum(1)
  }
  const closeDialog = ()=>{
    action.show = false
    action.goodsNum = 0
    action.totalValue = 0
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <xmdialog v-model:dialogshow="action.show">
    <div class="backImageColor">
      <div class="butList">
        <div
          :class="[
            'but',
            action.goodsNum == item?'select':'noSet'
          ]"
          v-for="item in specification"
          @click="handleNum(item)">
          {{ item }}天
        </div>
      </div>
      <div class="goodsPrice flex-align">
        <img src="@/assets/images/icon2.png" class="iconImg">
        <span>{{ action.totalValue }}</span>
      </div>
      <div class="imageBut flex-align-center">
        <img @click="closeDialog" src="@/assets/images/butimg3.png" >
        <img @click="handleExchange" src="@/assets/images/butimg2.png" >
      </div>
    </div>
  </xmdialog>
</template>

<style lang='scss' scoped>
  .backImageColor {
    width: 282px;
    height: 183px;
    padding: 27px 17px 0;
    box-sizing: border-box;
    background: #0F0F54;
    border: 1px solid #FFFDE5;
    border-radius: 12px;
    .butList {
      display: grid;
      grid-template-columns: repeat(4 , 56px);
      grid-gap: 0 7px;
      .but {
        width: 56px;
        height: 56px;
        line-height: 56px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border-radius: 8px;
        transition: background .18s, color .28s;
      }
      .noSet {
        color: #FFEED5;
        background: linear-gradient(360deg, #240442 0%, #090018 100%);
        border-radius: 8px;
        border: 1px solid #6B5EBC;
        box-sizing: border-box;
      }
      .select {
        color: #B74621;
        background: #FFE5BF;
      }
    }
    .goodsPrice {
      margin: 12px auto 12px;
    }
    .imageBut {
      img {
        width: 112px;
        height: 40px;
      }
      img:nth-child(1) {
        margin-right: 16px;
      }
    }
  }
</style>